<template>
  <div class="msg-details">
    <div class="msg-content">
      <div class="msg-content-info">
        <img class="content-pic" :src="QQ_pic" />
        <div class="content-user-time">
          <p>{{ username }}</p>
          <span>{{ createTime }}</span>
        </div>
      </div>
      <div class="msg-content-text">
        <p v-html="msgContent"></p>
      </div>
      <!-- <el-card class="box-card img-card"> -->
      <img :src="user_images" class=" img-card" />
      <!-- </el-card> -->
    </div>
    <label style="margin: 10px; font:normal 12px/30px '思源黑体';"
      >匿名评论</label
    >
    <div class="msg-comments">
      <div class="msg-comment" v-for="(item, index) in comments" :key="index">
        <img
          class="comment-pic"
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2714474327,506162139&fm=15&gp=0.jpg"
        />
        <div class="comment-detail">
          <p>{{ item.commentContent }}</p>
          <span>{{ item.createTimeStr }}</span>
        </div>
      </div>
    </div>
    <!-- <form @submit="commentSubmit"> -->
    <div class="my-comment">
      <textarea
        class="comment-input"
        value=""
        v-model="myComment"
        placeholder="回复"
        auto-height="true"
      />
      <button @click="sendComment" class="comment-btn">发送</button>
    </div>
    <!-- </form> -->
  </div>
</template>

<script>
export default {
  name: "comments",
  data() {
    return {
      username: "匿名用户",
      createTime: "xxxx-xx-xx",
      msgContent: null,
      QQ_pic: null,
      user_images: null,
      comments: null,
      myComment: "",
      topicId: "",
    };
  },
  created() {
    this.topicId = this.$route.query.topicId;
    this.findDetails();
  },
  methods: {
    sendComment() {
      let data = {
        commentContent: this.myComment,
        topicId: this.topicId,
      };
      this.$http({
        method: "post",
        url: "http://39.101.142.204:8090/comment",
        data: data,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.findDetails();
          this.myComment = "";
          this.$notify({
            title: "成功",
            message: "发布成功!",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "失败",
            message: res.msg,
          });
        }
      });
    },
    findDetails() {
      var topicId = this.topicId;
      this.$http({
        method: "get",
        url: "http://39.101.142.204:8090/detail/" + topicId,
      }).then((res) => {
        console.log(res);
        if (res.status == 200) {
          let data = res.data.data[0];
          console.log(data);
          let QQ = data.content.match(/联系方式:(\S*)\n/)[1];
		  data.content = data.content.replace(/\n/g, "<br/>");
		  console.log(QQ)
		  this.QQ_pic = "http://q1.qlogo.cn/g?b=qq&nk=" + QQ + "&s=100";
          if (QQ === "匿名用户") {
            this.QQ_pic =
              "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2714474327,506162139&fm=15&gp=0.jpg";
		  } 
		  this.username = QQ 
          this.msgContent = data.content;
          this.createTime = data.createTime;
          this.user_images = data.pic;
          this.comments = data.commentList;
        } else {
          this.$notify.error({
            title: "网络错误,稍后再试",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
* {
  box-sizing: border-box;
}
p {
  font: bold 12px/20px "思源黑体";
  // border: 1px solid green;
  margin: 0;
}
span {
  color: #ccc;
  font: normal 10px/5px Arial, Helvetica, sans-serif;
}
element::-webkit-scrollbar {
  display: none;
}
.msg-details {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: left;
  .msg-content {
    width: 100%;
    padding: 10px;
    padding-top: 5px;
    display: flex;
    flex-direction: column;
    border-bottom: 0.5px solid #cccccc;
    height: 40vh;
    .msg-content-info {
      display: flex;
      flex-direction: row;
      .content-pic {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin-right: 10px;
      }
      .content-user-time {
        p {
          margin-top: 4px;
          margin-bottom: 6px;
        }
        display: flex;
        flex-direction: column;
        // border: 1px solid green;
      }
    }
    .msg-content-text {
      margin-left: 20px;
      margin-top: 10px;
    }
    .img-card {
      width: 40vw;
      height: 20vh;
    }
  }
  .msg-comments {
    width: 100%;
    padding: 15px;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    // border: 1px solid green;
    overflow-y: auto;
    .msg-comment {
      display: flex;
      flex-direction: row;
      border-bottom: 0.5px dashed #cccccc;
      margin-top: 10px;
      .comment-pic {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        margin-right: 10px;
      }
      .comment-detail {
        margin-bottom: 10px;
      }
    }
  }
  .my-comment {
    width: 100%;
    height: auto;
    background-color: #f8f8f8;
    box-sizing: border-box;
    padding: 10px;
    font: normal 12px/24px Arial, Helvetica, sans-serif;
    color: #555555;
    position: fixed;
    bottom: 0px;
    .comment-input {
      width: 80%;
      margin-bottom: -5px;
      min-height: 60px;
      border: 0.5px solid #dddddd;
      font: normal 12px/24px Arial, Helvetica, sans-serif;
    }

    button {
      outline: none;
      border: 0.5px solid #dddddd;
      border-radius: 5px;
    }

    .comment-btn {
      width: 15%;
      float: right;
      margin: 5px;
      background-color: white;
      // color: #62C670;
      font: normal 12px/24px "思源黑体";
      position: fixed;
      bottom: 8px;
    }
  }
}
</style>
